<template>
  <div class="forecast-scheme-box">
    <el-dialog v-model="dialogVisible" title="来水预报方案" draggable>
      <div class="content-box">
        <el-table
          ref="tableRef"
          :data="state.schemeList"
          border
          style="width: 100%"
          @row-click="handleRowClick"
        >
          <el-table-column align="center" label="单选" width="50">
            <template #default="scope">
              <el-radio v-model="state.radio1" :label="scope.row.id">{{ '' }}</el-radio>
            </template>
          </el-table-column>

          <el-table-column
            prop="scName"
            label="方案名称"
            align="center"
            show-overflow-tooltip
            width="160"
          />
          <el-table-column
            prop="reportType"
            label="方案类型"
            align="center"
            show-overflow-tooltip
            width="150"
          />
          <el-table-column prop="yrPerd" label="预热期" align="center" show-overflow-tooltip />
          <el-table-column prop="yjPerd" label="预见期" align="center" show-overflow-tooltip />
          <el-table-column prop="fcTime" label="预报时间" align="center" show-overflow-tooltip />
          <el-table-column prop="status" label="状态" align="center" show-overflow-tooltip>
            <template #default="{ row }">
              {{ switchStatus(row.status) }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSure"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import {
  // 查询方案列表
  getDispatchSchemesList
} from '@/services/modules/dispatch-manage.js'
const dialogVisible = ref(false)
const handleOpenModel = (selectName) => {
  state.selectName = selectName
  dialogVisible.value = true
  acceptSchemesList()
}

const emit = defineEmits(['handleSureSave'])
const handleSure = () => {
  dialogVisible.value = false
  emit('handleSureSave', state.tableRadioData)
}

const state = reactive({
  schemeList: [],
  tableRadio: '',
  tableRadioData: []
})
const props = defineProps({
  zoneId: {
    type: String,
    // 默认大汶河流域
    default: 1
  }
})
// onMounted(() => {
//   acceptSchemesList()
// })
watch(
  () => {
    props.zoneId
  },
  () => {
    acceptSchemesList()
  },
  {
    deep: true
  }
)
function switchStatus(status) {
  switch (status) {
    case 0:
      return '未计算'
    case 1:
      return '计算中'
    case 2:
      return '计算完成'

    default:
      return '未计算'
  }
}
// 点击table某一行
function handleRowClick(val) {
  console.log(val, '1111')
  state.tableRadio = val.id
  state.tableRadioData = val
  // 查询方案详情
  // acceptSchemeDetail(val.id);
}
// 获取方案列表
function acceptSchemesList() {
  // reportType:0实测+降雨预报
  if (state.selectName == '实测预报降雨') {
    getDispatchSchemesList({ zoneId: props.zoneId, reportType: 0, schemeName: '' }).then((res) => {
      if (res.code == 200) {
        state.schemeList = res.data
        if (res.data.length > 0) handleRowClick(state.schemeList[0])
      }
    })
  } else if (state.selectName == '典型场次') {
    getDispatchSchemesList({ zoneId: props.zoneId, reportType: 1, schemeName: '' }).then((res) => {
      if (res.code == 200) {
        state.schemeList = res.data
        if (res.data.length > 0) handleRowClick(state.schemeList[0])
      }
    })
  } else if (state.selectName == '模拟降雨') {
    getDispatchSchemesList({ zoneId: props.zoneId, reportType: 3, schemeName: '' }).then((res) => {
      if (res.code == 200) {
        state.schemeList = res.data
        if (res.data.length > 0) handleRowClick(state.schemeList[0])
      }
    })
  }
}
defineExpose({ handleOpenModel })
</script>

<style lang="less" scoped>
.forecast-scheme-box {
  .content-box {
    :deep(.el-table) {
      height: 300px;
    }
  }
}
</style>
